<template>
      <div class="loginPage-model loginPage " :class="{'loginPage-model-visible':!state}" v-cloak="">
          <div class="login-form">
              <!--<f7-login-screen-title class="login-title" :class="{'login-title-visible':!state}">进进服饰经销商选品系统</f7-login-screen-title>-->
              <Alert :value.async="currentForm.failState" title="验证失败" ref="alert" @on-hide="currentForm.failState=false">
                <p style="display: inline-block;padding: 10px 0;font-size: 0.32rem">手机必填</p>
              </Alert>
              <div class="login-form-main">

                  <transition name="fade">

                     <div class="login-form-content phone-content" :class="{'login-form-content_active':!state}" v-show="currentForm.index === 'phone'">

                      <div class="content-login">

                          <div class="content-title">
                              登录
                          </div>

                          <div class="content-input">
                              <form action="" class="loginForm">

                                <flexbox>
                                   <flexbox-item :span="2/5" class="content-input-text">
                                     你的手机号
                                   </flexbox-item>
                                   <flexbox-item :span="3/5" class="content-input-main">
                                     <input autocomplete="off"   v-model="currentForm.phone" type="text" class="content-input-phone" name="phone" ref="phone">
                                   </flexbox-item>
                                </flexbox>

                              </form>
                          </div>

                      </div>

                      <div class="content-bottom" @click="vaildphone" v-show="!currentForm.btnLoading">
                         <span>下一步</span>
                      </div>

                      <div class="content-bottom" @click="vaildphone" v-show="currentForm.btnLoading">
                          <loading></loading>
                      </div>

                  </div>

                  </transition>

                  <transition name="fade">

                     <div class="login-form-content notice-content" :class="{'login-form-content_active':!state}"  v-show="currentForm.index === 'noUser'">

                      <div class="content-notice">

                          <div class="content-title">
                              提示
                          </div>

                          <div class="content-notice">
                              您的账户没有进入权限,若要开通请联系您所在地总代理开通授权
                          </div>

                      </div>

                      <div class="content-bottom" @click="backTophone">
                          返回
                      </div>

                  </div>

                  </transition>

                  <transition name="fade">

                     <div class="login-form-content command-content" :class="{'login-form-content_active':!state}"  v-show="currentForm.index === 'command'">

                      <div class="content-command">

                          <div class="content-close" @click="toggleForm('phone')">
                              <x-icon type="ios-arrow-left" size="20"></x-icon>
                          </div>

                          <div class="content-space" style="height: 0.5rem;"></div>

                          <div class="content-title">
                              请输入访问口令
                          </div>

                          <div class="content-notice">
                              口令每个月变更一次,请联系总代理索取
                          </div>

                          <ul class="content-list">

                              <template v-for="(item,index) in 4">
                                  <li>
                                      <input type="text" class="content-list-item" ref="number" @keyup="vaildCommand" >
                                  </li>
                              </template>

                          </ul>

                          <transition name="shake">
                              <div class="content-error" v-show="!currentForm.commandPass">
                                  口令错误,请重新输入
                              </div>
                          </transition>

                          <div class="content-success" v-show="currentForm.commandPass!== -1 && currentForm.commandPass">
                               验证成功!
                          </div>

                      </div>

                  </div>

                  </transition>

                  <transition name="fade">

                    <div class="login-form-content phone-content" :class="{'login-form-content_active':!state}" v-show="currentForm.index === 'password'">

                    <div class="content-login">

                      <div class="content-title">
                        总代理登录
                      </div>

                      <div class="content-close" @click="toggleForm('phone')">
                        <x-icon type="ios-arrow-left" size="20"></x-icon>
                      </div>

                      <div class="content-input">
                        <form action="" class="loginForm">

                          <flexbox>
                            <flexbox-item :span="2/5" class="content-input-text">
                              你的密码
                            </flexbox-item>
                            <flexbox-item :span="3/5" class="content-input-main">
                              <input autocomplete="off"   v-model="currentForm.password" type="password" class="content-input-phone" name="password" ref="password">
                            </flexbox-item>
                          </flexbox>

                        </form>
                      </div>

                    </div>

                    <div class="content-bottom" @click="vaildPassword" v-show="!currentForm.btnLoading">
                      <span>
                        完成
                      </span>
                    </div>

                    <div class="content-bottom" v-show="currentForm.btnLoading">
                      <loading></loading>
                    </div>

                  </div>

                  </transition>

                  <transition name="fade">

                  <div class="login-form-content notice-content" :class="{'login-form-content_active':!state}"  v-show="currentForm.index === 'error'">

                    <div class="content-notice">

                      <div class="content-title">
                        提示
                      </div>

                      <div class="content-notice" style="text-align: center;line-height: 0.8rem;">
                        您输入的密码错误
                      </div>

                    </div>

                    <div class="content-bottom" @click="toggleForm('password')">
                      返回
                    </div>

                  </div>

                </transition>

              </div>
          </div>
      </div>
</template>
<script>
    import { Flexbox, FlexboxItem, Divider,Alert} from 'vux'
    import $ from "jquery"
    import _ from "lodash"
    import Cleave from "cleave.js"
    import "cleave.js/dist/addons/cleave-phone.cn.js"
    import { vaildPhone,vaildeCommand,vaildPassword,vaildGlobelLogin } from "api/login.js"
    import { mapGetters,mapMutations,mapActions } from "vuex"
    import loading from "base/loading/loading.vue"
    //数字键盘码
    import {NUMBER_KEY_CODE} from "common/config/config"
    export default {
        props: {},
        data() {
            return {
                state:true,
                currentForm:{
                    index:'phone',
                    btnLoading:false,
                    phone:"",
                    commandPass:-1,
                    failState:false,
                    password:""
                }
            }
        },
        methods: {
            vaildphone(){
                if(this.currentForm.phone == ""){
                    this.currentForm.failState = true;
                }else{
                    this.currentForm.btnLoading = true;
                    vaildPhone({mobile:this.currentForm.phone}).then((Rs)=>{
                        this.currentForm.btnLoading = false;
                        switch (Rs.status){
                          case -1:
                            this.toggleForm('noUser');
                            break;
                          case 0:
                            this.toggleForm("password");
                            break;
                          case 1:
                            this.toggleForm("command");
                            break;
                        }
                    })
                }
            },
            vaildCommand(e){
               if(NUMBER_KEY_CODE.indexOf(e.keyCode)!== -1){
                   let index = $(this.$refs.number).index($(e.target));
                   let key = this._cocatPassword(index);
                   if(key.length === 4){
                       //锁定状态
                       this._toggleDisable(true);
                       vaildeCommand({
                         username:this.currentForm.phone,
                         password:key
                       }).then((Rs)=>{
                           Rs.status === -1?this.currentForm.commandPass = false:this.currentForm.commandPass = true;
                           // 隐藏提示栏
                           if(Rs.status === -1){
                               _.delay(()=>{
                                   this.currentForm.commandPass = -1;
                                   this._toggleDisable(false)
                               },2000)
                           }else{
                                this.currentForm.commandPass = true;
                                _.delay(()=>{
                                    this.state = true;
                                    Rs.info.isAgency = false;
                                    this.$localStore.setUserInfor(Rs.info);
                                    this.settingUserData(Rs.info);
                                },1000)
                           }
                       });
                   }
               }
            },
            vaildPassword(){
              this.currentForm.btnLoading = true;
              vaildPassword({
                username:this.currentForm.phone,
                password:this.currentForm.password
              }).then((Rs)=>{
                this.currentForm.btnLoading = false;
                switch(Rs.status){
                  case 0:
                    //密码验证通过
                    this.state = true;
                    Rs.info.isAgency = true;
                    this.$localStore.setUserInfor(Rs.info);
                    this.settingUserData(Rs.info);
                    break;
                  case -1:
                    this.toggleForm("error");
                    break;
                }
              })
            },
            backTophone(){
                this.toggleForm('phone')
            },
            /**
             *  @function 切换窗口状态的
             *
             * */
            toggleForm(name){
                this.currentForm.index = name;
            },
            //合并口令
            _cocatPassword(index){
                let key = "",currentInput = this.$refs.number[index]
                this.$refs.number.forEach((item)=>{
                     key += item.value;
                     if(currentInput.value ==="")return;
                     index + 1 < this.$refs.number.length?this.$refs.number[index + 1].focus():this.$refs.number[0].focus();
                });
                return key;
            },
            //input 切换disable
            _toggleDisable(val=false){
                this.$refs.number.forEach((item)=>{
                    item.disabled = val
                })
            },
            //判断是否需要登录
            async _jugeLogin(){
               try{
                 //获得后台配置是否开启全局登陆
                 let globelLogin = await vaildGlobelLogin();
                 let info = this.$localStore.getUserInfor();
                 if(globelLogin.msg !== "关闭"){
                    !info?this.state = this.login:this.settingUserData(info);
                 }else{
                   if(info){
                      this.settingUserData(info)
                   }else{
                      this.settingUserData({
                        name:"游客",
                        headimg:"/public/static/header/01.png",
                        mobile:"",
                        isAgency:false,
                        id:-1
                      });
                   }
                 }
               }catch (err){
                  console.log(err);
               }
            },
            //手动打开登录
            loginShow(){
              console.log(this.state)
              this.state = false;
            },
            ...mapMutations({
                "setLogin":"SET_LOGIN"
            }),
            ...mapActions({
                "settingUserData":"settingUserData"
            })
        },
        components: { loading,Flexbox, FlexboxItem, Divider,Alert },
        mounted() {
              //this.$localStore.clearUserInfor();
              this._jugeLogin();
        },
        created() {

        },
        computed:{
            ...mapGetters(['login'])
        },
        watch:{
            login(val){
                this.state = val;
            }
        }
    }
</script>
<style lang="less">
    .loginPage{
        overflow-x: hidden;
        background-color: rgba(0,0,0,0.8);
        .login-form{
            position: relative;
            top:2rem;
            left:0.8rem;
            .login-title{
                text-align: center;
                font-size: 0.32rem;
                color: #fff;
                margin: 0.1rem 0;
                opacity: 0;
                transition: all 0.3s;
                transform: translate3d(0,0,0) scale(1.185);
                font-weight: 600;
                &-visible{
                    opacity: 1;
                    transform: translate3d(0,0,0) scale(1);
                }
            }
            .content-input{
                height: 0.64rem;
                border-bottom: 1px solid #ccc;
                width: 90%;
                position: relative;
                left: 5%;

                &-text,&-main{
                    height: 0.63rem;
                    line-height: 0.63rem;
                    text-align: center;
                    letter-spacing: 0.01rem;
                }

                &-text{
                    color: #999;
                }

                &-phone{
                    width: 100%;
                    height: 95%;
                    border: none;
                }
            }
            &-content{
                width: 4.68rem;
                height: 3.06rem;
                position: absolute;
                border-radius: 0.1rem;
                overflow: hidden;
                opacity: 0;
                transform: translate3d(0,0,0) scale(1.185);
                transition-property: transform,opacity;
                transition-duration: .4s;
                color: #000;

                .content-title{
                    height: 1.3rem;
                    line-height: 1.3rem;
                    text-align: center;
                    font-weight: 600;
                    letter-spacing: 1px;
                    font-size: 0.32rem;
                    color: #1b1b1b;
                }

                .content-bottom{
                    width: 100%;
                    height:0.75rem;
                    line-height: 0.75rem;
                    text-align: center;
                    color: #fff;
                    position: absolute;
                    background: #4a4c5b;
                    bottom:0;
                    left: 0;
                }

                &_active{
                    opacity: 1;
                    -webkit-transition-duration: .4s;
                    transition-duration: .4s;
                    -webkit-transform: translate3d(0,0,0) scale(1);
                    transform: translate3d(0,0,0) scale(1);
                }

            }
            &-main{
                width: 4.68rem;
                height: 3.06rem;
                position: relative;
            }
            .content-login{
                background: #fff;
                height: 100%;
                width: 99.5%;
                position: relative;
                left: 0.1%;

                .content-close{
                  position: absolute;
                  top:0.1rem;
                  left: 0.2rem;
                  i{
                    font-size: 0.30rem;
                  }
                }
            }
            .notice-content{
                height: 100%;
                width: 100%;
                background: #fff;
                .content-title{
                    height: 0.7rem;
                    line-height: 0.7rem;
                }
                .content-notice{
                    padding:  0.15rem 0.15rem;
                    color: #999;
                }
            }
            .content-command{
                height: 100%;
                width: 100%;
                background: #fff;
                position: relative;
                .content-close{
                    position: absolute;
                    top:0.1rem;
                    left: 0.2rem;
                    i{
                        font-size: 0.30rem;
                    }
                }
                .content-title{
                    height: 0.6rem;
                    line-height: 0.6rem;
                    color: #4a4c5b;
                }
                .content-notice{
                    font-size: 0.24rem;
                    width: 95%;
                    position: relative;
                    left: 2.5%;
                    color: #999;
                    padding: 0.1rem 0;
                }
                .content-list{
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    padding: 10px 0 0 0;
                    li{
                        list-style: none;
                        width: 0.63rem;
                        height: 0.63rem;
                        margin-left: 0.15rem;
                        &:first-child{
                            margin-left: -0.45rem;
                        }
                        input{
                            width: 100%;
                            height: 100%;
                            border: 1px solid #ccc;
                            margin-left: 0.1rem;
                            text-align: center;
                        }
                    }
                }
                .content-error,.content-success{
                    width: 100%;
                    text-align: center;
                    padding: 0.2rem 0;
                    color: #ff2418;
                    font-size: 0.26rem;
                }
                .content-success{
                    color: #2b804d;
                }
            }
        }
        &-model{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.8);
            z-index: 13000;
            visibility: hidden;
            opacity: 0;
            transition: all 0.4s;
        }
        &-model-visible{

            visibility: visible;
            opacity: 1;
        }
        .fade-enter-active{
            animation-name: fadeInLeft;
            animation-duration: .5s;
            animation-timing-function: ease-in-out;
        }
        .fade-leave-active{
            animation-name: fadeOutRight ;
            animation-duration: .5s;
            animation-timing-function: ease-in-out;
        }
        .shake-enter-active{
            animation: shake .5s ease;
        }
        .shake-leave-active{
            animation: fadeOut .5s ease;
        }
    }
</style>
